<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 图友圈列表
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">

        <el-input v-model="query.userName" placeholder="请输入发表用户姓名" class="handle-input mr10"
          @change="handleSearchRealName"></el-input>
      </div>
      <div class="handle-box">

        <el-input v-model="query.comment" placeholder="请输入发表内容" class="handle-input mr10"
          @change="handleSearchComment"></el-input>
      </div>
      <el-table :data="userList" row-key="id" border default-expand-all :tree-props="{ children: 'children' }">
        <el-table-column prop="userName" label="发布用户" width="160" align="center"></el-table-column>
        <el-table-column prop="dateTime" label="时间" align="center" width="160"></el-table-column>
        <el-table-column prop="comment" label="内容" align="center"></el-table-column>
        <el-table-column prop="title" label="标题" align="center"></el-table-column>
        <el-table-column prop="total" label="评论数" align="center"></el-table-column>
        <el-table-column label="图片" align="center">
          <template slot-scope="scope">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item>
                <div class="demo-image__preview">
                  <el-image style="width: 100px; height: 100px" :src=scope.row.file>
                  </el-image>
                </div>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button class="green" @click="deleteCommentsOrPhotoCircle(scope.row.id, scope.row.type)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total,sizes, prev, pager, next, jumper" @size-change="handlePageSizeChange"
          @current-change="handlePageChange" :current-page="query.pageCurrent"
          :page-sizes="[10, 50, 100, 200, 500, 1000]" :page-size="query.pageSize" :total="pageTotal">
        </el-pagination>
      </div>
    </div>
  </div>

</template>

<script>
import { pagePhotoCircle, deletePhotoCircle } from '../../../utils';

export default {
  name: 'basetable',
  data() {
    return {
      query: {
        pageCurrent: 1,
        pageSize: 10,
        name: '',
        idList: [],
        userName: "",
        comment: ""
      },
      //上次登录时间与地址
      userList: [],
      pageTotal: 0,
      dialogVisible: false,
      opinion: {
        reply: "",
        id: ""
      },
      id: ""
    };
  },
  created() {
    this.getPhotoCricleList();
  },
  methods: {

    getPhotoCricleList() {
      pagePhotoCircle(this.query).then(res => {
        let data = res.data;
        this.pageTotal = data.data.total;
        this.userList = data.data.list;
        for (let i = 0; i < this.userList.length; i++) {
          for (let j = 0; j < this.userList[i].children.length; j++) {
            this.$set(this.userList[i].children[j], 'file', JSON.parse(this.userList[i].file)[j+1])
          }
          this.userList[i].file = JSON.parse(this.userList[i].file)[0]
        }
        console.log(this.userList, 'userListuserList');
      });
    },
    //分页跳转
    handlePageChange(val) {
      this.$set(this.query, 'page', val);
      this.getPhotoCricleList();
    },
    deleteCommentsOrPhotoCircle(e, a) {
      deletePhotoCircle({
        id: e,
        type: a
      }).then(res => {
        this.$message.success(res.data.message);
        this.getPhotoCricleList();
      })
    },
    //每页大小改变
    handlePageSizeChange(val) {
      this.$set(this.query, 'pageSize', val);
      this.getPhotoCricleList();
    },
    //发表用户姓名
    handleSearchRealName(val) {
      this.$set(this.query, 'userName', val);
      this.getPhotoCricleList();
    },
    //发表用户姓名
    handleSearchComment(val) {
      this.$set(this.query, 'comment', val);
      this.getPhotoCricleList();
    },
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}
</style>
